<script>
import { ref } from 'vue';

// 1. 选项式写法
// export default {
//   data() {
//     return {
//       show: true,
//       count: 0
//     }
//   },
//   methods: {
//     toggle() {
//       this.show = !this.show
//     },
//     increment() {
//       this.count++
//     }
//   }
// }

// 2. 组合式API写法
export default {
  setup() {
    // 2.1 图片的显示和隐藏
    // ref的作用就是让属性具备响应式
    const show = ref(true)
    const toggle = () => {
      show.value = !show.value
    }

    // 2.2 计数器累加
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return { show, toggle, count, increment }
  }
}
</script>

<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/vue.svg" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
</template>

<style scoped></style>
